<script lang="ts" setup>
import { useFetch } from '@/mobile/hooks/fetch';
import { useAsyncData } from '@/mobile/hooks/async-data';

const { $fetch } = useFetch();
const templates = import.meta.glob('/src/common/components/activity-template/*/index.vue', {
  eager: true,
  import: 'default',
}) as Record<string, any>;

const { data: listing } = useAsyncData(
  'home:tempalte3:event',
  () => $fetch('/activity/list'),
);
</script>

<template>
  <div class="mt-20 h-auto" v-if="listing?.length">
    <h3 class="text-16 text-#292929 font-500 leading-22">{{ $t('mobile.home.event.title') }}</h3>

    <a :href="item.jumpUrl" v-for="item in listing?.slice(0, 3)" :key="item.atName" class="mt-20 h-72 flex flex-shrink-0 gap-8">
      <div>
        <img :src="item.atUrl" class="block h-72 w-120 rounded-4 object-cover" :alt="item.atName" v-if="item?.atUrl">
        <Component
          class="h-72 w-120 text-10 leading-12"
          :is="templates[`/src/common/components/activity-template/${item.atTemplate}/index.vue`]"
          :title="item.atName"
          v-else-if="item?.atTemplate && templates[`/src/common/components/activity-template/${item.atTemplate}/index.vue`]"
        />
      </div>
      <div class="flex-1">
        <h3 class="line-clamp-2 h-48 text-16 text-#292929 font-500 leading-24">{{ item.atName }}</h3>
        <div class="mt-4 flex-y-center flex-shrink-0 justify-between text-12 text-#8b8b8b font-400 leading-20">
          <div>{{ item.atStartTime.split(' ')[0] }}</div>
          <div class="max-w-140 flex-y-center gap-3" v-if="item.location">
            <div class="i-icons:position size-16"></div>
            <div class="line-clamp-1 flex-1">{{ item.location }}</div>
          </div>
        </div>
      </div>
    </a>
  </div>
</template>

<style lang="scss" scoped>
</style>
